<template>
  <el-row justify="left" style="margin-top: 20px; margin: 50px">
    <el-space wrap>
      <el-button type="success" @click="add">新增救助信息</el-button>
    </el-space>
  </el-row>
 <el-row justify="left" style="margin-top: 20px; margin: 50px">
      <el-table
        :data="tableData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
        border
        stripe
      >
        <el-table-column label="宠物照片" width="120">
          <template #default="scope">
            <el-image style="width: 100px; height: 100px" :src="scope.row.photo" />
          </template>
        </el-table-column>
        <el-table-column prop="petName" label="宠物名字" width="120" />
        <el-table-column prop="age" label="年龄" width="120" />
        <el-table-column prop="gender" label="性别" width="120" :formatter="genderFormatter"/>
        <el-table-column prop="statement" label="绝育状态" width="120" :formatter="statementFormatter" />
        <el-table-column prop="vaccState" label="接种状态" width="120" :formatter="vaccStateFormatter" />
        <el-table-column prop="address" label="地址" width="120" />
        <el-table-column prop="health" label="身体状态" width="120" />
        <el-table-column prop="otherDescriptions" label="其他描述" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="samll" type="primary" @click="handleEdit(scope.$index, scope.row)"
            >修改</el-button
            >
          <el-popconfirm
          title="你确定要删除吗？"
           confirm-button-text="是"
           cancel-button-text="否"
            @confirm="handleDelete(scope.$index, scope.row)"
            >
             <template #reference>
              <el-button size="samll" type="danger"
               >删除</el-button
                >
               </template>
              </el-popconfirm>
             </template>
        </el-table-column>      
      </el-table>
  </el-row>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import { onMounted,ref } from 'vue'
import { assistance } from '../../http'
import router from '@/router'

const tableData = ref([])
const add = () => {
  router.push({ path: '/pet7' })
}
const query= async() => {
  const res=await assistance.query()
  if(res.code==0){
    tableData.value=res.data
  }
}
  const genderFormatter = (row, column, cellValue, index) => {
    if (cellValue == 0) {
      return '公'
    } else if (cellValue == 1) {
      return '母'
    }else{
      return '未知'
    }
  }
  const statementFormatter = (row, column, cellValue, index) => {
    if (cellValue == 0) {
      return '未绝育'
    } else if (cellValue == 1) {
      return '已绝育'
    }
    else{
      return '未知'
    }
  }
  const vaccStateFormatter = (row, column, cellValue, index) => {
    if (cellValue == 0) {
      return '未接种'
    } else if (cellValue == 1) {
      return '已接种'
    }
    else{
      return '未知'
    }
  }
  const handleDelete= async (index, row) => {
    let result=await assistance.delete(row.aidId)
    if(result.code==0)
    {
      ElMessage .success('删除成功')
      query()
    }
  }
  const handleEdit = (index, row) => {
    router.push({ path: '/pet7', query: { aidId: row.aidId } })
  }
  onMounted(() => {
    query()
  })
</script>
